<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>自适应九宫格</title>
  <style>
    body {
      position: relative;
      width: 100%;
      padding-bottom: 100%; /* 让<宽 高>始终相等*/
      margin: 0;
    }

    .container {
      position: absolute; /* 利用绝对定位铺满父容器 */
      width: 100%;
      height: 100%;
    }

    .container.grid {
      display: grid;
      grid-gap: 1px;
      grid-template-rows: repeat(3, 1fr);
      grid-template-columns: repeat(3, 1fr);
    }

    .container div {
      background-color: gray;
    }

    .container.flex {
      display: flex;
      flex-wrap: wrap;
      /* 子元素宽高都设置100%/3即可 */
    }
  </style>
</head>
<body>
<div class="container grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>
</body>
</html>
